<route lang="json5" type="page">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '我的',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view class="">
    <!-- 个人信息 -->
    <div class="my-info">
      <!-- 个人信息 -->
      <div class="line1">
        <div class="left">
          <wd-skeleton theme="avatar" />
          <div class="user-info">
            <div class="name">Allen</div>
            <div class="level">高级会员</div>
          </div>
        </div>
        <div class="edit-useinfo">个人资料</div>
      </div>
      <!-- 收藏关注足迹 -->
      <div class="line2">
        <div class="item">
          <div class="number">1</div>
          <div class="favorite">收藏</div>
        </div>
        <div class="item">
          <div class="number">1</div>
          <div class="favorite">关注</div>
        </div>
        <div class="item">
          <div class="number">1</div>
          <div class="favorite">足迹</div>
        </div>
      </div>
    </div>

    <!-- 菜单卡片 -->
    <div class="money">
      <div class="item">
        <img src="https://via.placeholder.com/61x54.png/3c9cff/fff" alt="" />
        <div class="side">
          <div>0</div>
          <div>余额</div>
        </div>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/61x54.png/3c9cff/fff" alt="" />
        <div class="side">
          <div>0</div>
          <div>余额</div>
        </div>
      </div>
    </div>
    <div class="menu1">
      <wd-cell title="我的订单" value="内容" icon="setting" />
      <wd-cell title="我的消息" value="内容" icon="setting" />
    </div>
    <div class="menu2">
      <wd-cell title="我的订单" value="内容" icon="setting" />
      <wd-cell title="我的消息" value="内容" icon="setting" />
      <wd-cell title="我的订单" value="内容" icon="setting" />
      <wd-cell title="我的消息" value="内容" icon="setting" />
      <wd-cell title="版本号" value="1.0.1" icon="setting" />
    </div>
  </view>
</template>

<script lang="ts" setup>
//
</script>

<style lang="scss" scoped>
.my-info {
  background: rgb(231, 82, 30);
  .line1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      justify-content: center;
    }
  }
  .line2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 15%;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
.money {
  display: flex;
  justify-content: space-around;
  .item {
    display: flex;
    justify-content: center;
  }
}
</style>
